<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { searchDishes } from '@/api/shop'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const config = getApp().globalData.config
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const query = ref({goodsName: '', status: 1, areaId: user.addressIds[2], current: 1, size: 20})
	const triggered = ref(false)
	const total = ref(0)
	const list = ref([])
	
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		searchDishes(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			data.forEach(item => {item.num = 0})
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList() {
		if(loadStatus.value == 'loadmore' && list.value.length < total.value){
			loadStatus.value = 'loading'
			query.value.current ++
			searchDishes(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				data.forEach(item => {item.num = 0})
				total.value = Number(result.total)
				list.value.push(...data)
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function openPage(item) {
		let url = `/pages/shop/goodsDetail?id=${item.goodsId}&title=${item.goodsName}`
		uni.navigateTo({url})
	}
	function search() {
		triggered.value = true
	}
	
	onLoad(() => {
		search()
	})
</script>

<template>
	<view class="app-container">
		<view class="search-box theme-btn">
			<uv-icon name="search" color="#5B5B5B" size="50" />
			<input type="text" v-model="query.goodsName" placeholder="请输入要搜索的商品" class='input-text' confirm-type="search" @confirm="search" />
			<uv-button color="linear-gradient(245deg, #F92E1D 0%, #FF3E49 100%)" shape="circle" size="small" text="搜索" :disabled="loading" @click="search" />
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList">
			<view class="content-list" v-if="list.length">
				<view v-for="item in list" :key="item.goodsId" class="good-box" @click="openPage(item)">
					<goods v-model="item.num" :img="item.images && item.images[0] && item.images[0].furl" :name="item.goodsName"
						:price="item.price" :specs="item.specs" :min="item.minNum" :max="item.maxNum" :showAdd="false" ></goods>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" isDot line></uv-load-more>
			</view>
			<empty text="没有找到您搜索的商品" v-else></empty>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		padding: 16rpx 0;
		background-color: #FFFFFF;
		.search-box{
			margin: 0 16rpx 16rpx;
			height: 80rpx;
			padding: 8rpx;
			display: flex;
			align-items: center;
			gap: 8rpx;
			border: 2rpx solid #FE3B00;
			border-radius: 72rpx;
			.input-text{
				flex: 1;
			}
		}
		.app-content{
			height: calc(100% - 96rpx);
			.content-list{
				padding: 24rpx 32rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
			}
		}
	}
</style>